<template>
  <view v-if="isLoaded">
    <li-report
      :param.sync="param"
      :reportData="tableData"
      v-on:afterTabClick="afterTabClick($event)"
      isTab
      :tabList="[
        {
          text: `商品大类`,
          columns: [
            {
              name: `name`,
              label: `名称`,
              fixed: true,
            },
            {
              name: `count`,
              label: `数量`,
              fixed: true,
            },
            {
              name: `amount`,
              label: `金额`,
              fixed: true,
            },
            {
              name: `amountPercent`,
              label: `金额占比`,
              fixed: true,
            },
          ],
          reportData: tableData.bigCategorySummary,
        },
        {
          text: `商品小类`,
          columns: [
            {
              name: `name`,
              label: `名称`,
              fixed: true,
            },
            {
              name: `count`,
              label: `数量`,
              fixed: true,
            },
            {
              name: `amount`,
              label: `金额`,
              fixed: true,
            },
            {
              name: `amountPercent`,
              label: `金额占比`,
              fixed: true,
            },
          ],
          reportData: tableData.smallCategorySummary,
        },
      ]"
    >
      <template #l>
        <li-pie-chart
          v-if="
            isLoaded &&
            tabIdx == 0 &&
            tableData.bigCategorySummary &&
            tableData.bigCategorySummary.length > 0
          "
          :cd="tableData.bigCategorySummary"
        />
        <li-pie-chart
          v-if="
            isLoaded &&
            tabIdx == 1 &&
            tableData.smallCategorySummary &&
            tableData.smallCategorySummary.length > 0
          "
          :cd="tableData.smallCategorySummary"
        />
      </template>
    </li-report>
  </view>
</template>

<script>
import date from "@/utils/date";
import LiReportMixin from "../../../mixins/liReportMixin.js";
import { GetBusinessDaySummary } from "../../../common/modules/report.js";

export default {
  mixins: [LiReportMixin],
  data() {
    return {
      navTitle: "分类统计",
      reportFn: GetBusinessDaySummary,
      param: {
        dataTimeRange: [date.getDate(0), date.getDate(0)],
      },
      opts: {
        color: [
          "#1890FF",
          "#91CB74",
          "#FAC858",
          "#EE6666",
          "#73C0DE",
          "#3CA272",
          "#FC8452",
          "#9A60B4",
          "#ea7ccc",
        ],
        padding: [5, 5, 5, 5],
        enableScroll: false,
        extra: {
          pie: {
            activeOpacity: 0.5,
            activeRadius: 10,
            offsetAngle: 0,
            labelWidth: 15,
            border: false,
            borderWidth: 3,
            borderColor: "#FFFFFF",
          },
        },
      },
    };
  },
  methods: {
    afterTabClick: function (e) {
      this.tabIdx = e.tabIdx;
    },
  },
};
</script>
